<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>20_鼠标的三种位置</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            div {
                position: absolute;
                top: 1500px;
                width: 300px;
                height: 300px;
                /* margin-left: 20px; */
                background-color: rgb(241, 146, 162);
            }
        </style>
    </head>
    <body style="height: 3000px;">
        <div></div>

        <!-- 
            offsetX  offsetY
            拿的是鼠标相对自身元素的水平距离和垂直距离   
            相对的是自身元素左上角（以自身元素左上角为原点） 
            
            clientX& clientY    
            拿的是鼠标相对视口的 水平距离和垂直距离  
            相对的是视口的左上角（以视口左上角为原点）

            pageX pageY           
            拿的是鼠标相对页面（第一屏）的水平距离和垂直距离   
            相对的是页面的左上角（以页面左上角为原点）
        -->

        <script>
            var div = document.querySelector('div');

            div.onclick = function(event){
                console.log(event);
            }
        </script>
    </body>
</html>